<template>
    <el-drawer v-model="drawerVisible" :title="title" :direction="direction" :size="size"
        :before-close="handleBeforeClose">
        <slot />
    </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
/**
 * @typedef {Object} Props
 * @property {boolean} modelValue - 控制对话框的显示与隐藏
 * @property {string} [title=''] - 对话框的标题
 * @property {'ltr' | 'rtl' | 'ttb' | 'btt'} [direction='rtl'] - 对话框的方向
 * @property {string | number} [size='30%'] - 对话框的大小
 */
const props = withDefaults(defineProps<{
    modelValue: boolean;
    title?: string;
    direction?: 'ltr' | 'rtl' | 'ttb' | 'btt';
    size?: string | number;
}>(), {
    modelValue: false,
    title: '',
    direction: 'rtl',
    size: '30%',
});


// 定义emit函数，用于向父组件传递事件
const emit = defineEmits(['update:modelValue']);

// 使用ref创建一个响应式变量，用于控制抽屉的可见性
const drawerVisible = ref(props.modelValue);

// 当props中的modelValue改变时，更新drawerVisible的值
watch(
    () => props.modelValue,
    (newValue) => {
        drawerVisible.value = newValue;
    }
);

// 定义关闭抽屉前的回调函数，用于添加确认关闭的逻辑
const handleBeforeClose = (done: () => void) => {
    console.log('发送事件通知父组件更新modelValue')
    emit('update:modelValue', false); // 发送事件通知父组件更新modelValue
    done(); // 触发关闭操作
};
</script>